

.dialog-mask{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);


}

.dialog-wrapper{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  overflow: auto;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dialog {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  /* fixed */
  position: absolute;
  pointer-events: auto;
  /* 使用flex布局 可以直接设定窗口的高度，而不用管body的高度 */
  display: flex;
  flex-direction: column;
}
.dialog-center {
  /*
  left: 50%;
  transform: translate(-50%, -50%);
  // top: 50%;
  // transform: translateY(-50%);*/
  margin: auto;
}

.dialog-body{
  word-wrap: break-word;
  padding: 16px;
  font-size: 14px;
  line-height: 1.5715;
  word-wrap: break-word;
  overflow: auto;
  flex-grow: 1;
}
.dialog-body-text{
  padding: 0;
  color: #2b2b2b;
  font-size: 14px;
  word-break: break-all;
}
.dialog-header{
    
    border-radius: 4px 4px 0 0;
    color: #666;
    padding: 16px 16px 15px;
}
.dialog-header-line{
  border-bottom: 1px solid #f0f0f0;
}


.dialog-title {
  word-wrap: break-word;
  color:rgba(0, 0, 0, 0.88);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  display: flex;
  align-items: center;
  margin-right: 22px;
}

.ellipsis{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dialog-title-center{
  justify-content: center;
}
.dialog-title-left{
  justify-content: flex-start;
}

.dialog-close{
  /* position: absolute;
  top: 12px;
  right: 12px;
  color: rgba(0, 0, 0, 0.45);
  cursor: pointer; */
    position: absolute;
    top: 17px;
    inset-inline-end: 17px;
    z-index: 1010;
    padding: 0;
    color: rgba(0, 0, 0, 0.45);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    background: transparent;
    border-radius: 4px;
    width: 22px;
    height: 22px;
    border: 0;
    outline: 0;
    cursor: pointer;
    transition: color 0.2s,background-color 0.2s;
}

.close-x{
  display: flex;
  line-height:22px;
  justify-content: center;
  font-size: 16px;
}
.dialog-close:hover{
  color: rgba(0, 0, 0, 0.88);
  background-color: rgba(0, 0, 0, 0.06);
    text-decoration: none;
}
.dialog-footer{
  /* margin-top: 20px; */
   /* border-radius: 0 0 4px 4px;   */

   padding: 10px 16px;
}

.dialog-footer-right{
  text-align: right;
}
.dialog-footer-center{
  text-align: center;
}
.dialog-footer--top-line{
  border-top: 1px solid #f0f0f0;
}

/* dialog 打开 关闭 过度动画 */
/* 参考 vant  */
.van-fade-enter-active {
  animation: 0.3s van-fade-in both ease-out
}

.van-fade-leave-active {
  animation: 0.3s van-fade-out both ease-in
}

 .van-dialog-enter-active,
.van-dialog-leave-active{
  transition: 0.3s;
  transition-property: transform,opacity;
} 

.van-dialog-enter-from {
  transform: translate3d(0,-25%,0) scale(.7);
  opacity: 0;
}

.van-dialog-leave-active {
  transform: translate3d(0,-25%,0) scale(.9);
  opacity: 0;
}


@keyframes van-fade-in {
  0% {
      opacity: 0
  }

  to {
      opacity: 1
  }
}

@keyframes van-fade-out {
  0% {
      opacity: 1
  }

  to {
      opacity: 0
  }
}

/* 参考 weui  */
.weui-fade-enter-active,
.weui-dialog-enter-active,
.weui-animate-fade-in {
  animation: fadeIn ease .3s forwards;
}


.weui-fade-leave-active,
.weui-dialog-leave-active,
.weui-animate-fade-out {
  animation: fadeOut ease .3s forwards
}


@keyframes fadeIn {
  0% {
      opacity: 0
  }

  to {
      opacity: 1
  }
}

@keyframes fadeOut {
  0% {
      opacity: 1
  }

  to {
      opacity: 0
  }
}
/* 参考 layer  */

.layer-anim-00 {
  animation-fill-mode: both;
  animation-duration: .3s;

  animation-name: layer-bounceIn
}



.layer-anim-01 {
  animation-fill-mode: both;
  animation-duration: .3s;

  animation-name: layer-zoomInDown
}

.layer-anim-close {
  animation-name: layer-bounceOut;
  animation-fill-mode: both;
  animation-duration: .2s
}

@keyframes layer-bounceIn {
  0% {
      opacity: 0;
      transform: scale(.5)
  }

  100% {
      opacity: 1;
      transform: scale(1)
  }
}

@keyframes layer-zoomInDown {
  0% {
      opacity: 0;
      transform: scale(.1) translateY(-2000px);
      animation-timing-function: ease-in-out
  }

  60% {
      opacity: 1;
      transform: scale(.475) translateY(60px);
      animation-timing-function: ease-out
  }
}

@keyframes layer-bounceOut {
  100% {
      opacity: 0;
      transform: scale(.7)
  }

  30% {
      transform: scale(1.05)
  }

  0% {
      transform: scale(1)
  }
}

